<template>
  <div class="hd Confirm">
    <div class="hd mt10">
      <img src="../../assets/yygh.png" alt="">
    </div>
    <search-bar></search-bar>
    <div class="content">
      <position>
        <router-link to="/yygh">预约挂号</router-link>
        &gt;
        <span class="last">确认预约</span>
      </position>
      <steps :step="1"></steps>

      <div class="border_content four-cornor-wrapper">
         <i class="l"></i>
      <i class="r"></i>
      <i class="t"></i>
      <i class="b"></i>
        <div class="sure_message">
          确认信息
        </div>
        <div class="sure_message_content">
          <div class="name">
            <span>预约人姓名：</span>
            <select-role @btnclick="selectFamilyHandle"></select-role>
          </div>
          <!-- <div class="jiu_card_num">
            <span>就诊卡号：</span>
            <span>6743923</span>
          </div>
          <div class="yi_card_number">
            <span>医保卡号：</span>
            <span>6743923</span>
          </div> -->
          <div class="id_card_num">
            <span>证件号码：</span>
            <span class="f20">{{person.certificate.certificateNo}}</span>
          </div>
          <div class="department_time">
            <div class="department_title">
              就诊科室：
            </div>
            <div class="doctor_name f20">
              <span>{{doctor.regDeptName || dep.deptName}}</span>
              <span>{{doctor.doctorName}}</span>
            </div>
            <div class="onduty_time_title">
              就诊时间段：
            </div>
            <div class="onduty_time f20">
              {{dep.workDate}} &nbsp;&nbsp; {{time.startTime}} - {{time.endTime}}
            </div>
          </div>
          <div class="price">
            <span>挂号费：</span>
            <span  class="f20">{{dep.charge}}</span>
            <span>元</span>
          </div>
          <div class="money_button">
            <a href="javascript:;" class="common-main-button"  @click="goPay">前往付费</a>
            <a href="javascript:;"  class="common-sub-button" @click="goBack">返回</a>

          </div>
        </div>
        <div class="warn">
          <ul>
            <li>
              <img src="../../assets/warn.png" alt="">
              <span>温馨提示</span>
            </li>
            <li v-for="v in APPOINT_DESCRIPTION" :key="v">
              {{v}}
            </li>

          </ul>
        </div>
      </div>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialog"
      :close-on-click-modal = "false"
      :close-on-press-escape = "false"
      size="tiny"
      :show-close = "false"
    >
      <div v-html="dialogContent" class="text-indent"></div>
      <div slot="footer" class="dialog-footer">
        <a href="javascript:;" class="common-main-button"  @click="confirmSubmit">确 定</a>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Steps from '../../components/Steps'
import Position from '../../components/Position'
import SearchBar from '../../components/SearchBar'
import SelectRole from '../../components/SelectRole'
import {commonAjax, ORG_ID, PLATFORM_PREFIX, SEX, CONFIRM_PAY_TIPS, SUBMIT_SOURCE, APPOINT_DESCRIPTION} from '../../api/api'
export default {
  data () {
    return {
      dialogVisible: false,
      dialog: false,
      dialogTitle: '',
      dialogContent: '',
      person: JSON.parse(localStorage.familyPerson),
      time: JSON.parse(localStorage.time),
      dep: JSON.parse(localStorage.dep),
      dept: JSON.parse(localStorage.dept),
      doctor: JSON.parse(localStorage.doctor),
      SEX: SEX,
      CONFIRM_PAY_TIPS: CONFIRM_PAY_TIPS,
      APPOINT_DESCRIPTION: APPOINT_DESCRIPTION
    }
  },
  mounted () {
    document.body.scrollTop = document.documentElement.scrollTop = 0
    if (!localStorage.person) {
      return
    }
  },
  methods: {
    goBack () {
      window.history.back()
    },
    goPay () {
      if (!this.person.mpiId) {
        this.$message({
          message: '请的信息不完善，请先完善信息再预约挂号',
          type: 'error'
        })
        this.$router.push('/personal')
        return
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax(
        [{
          orgId: ORG_ID,
          mpiId: this.person.mpiId,
          domain: '',
          cardType: this.person.certificate.certificateType,
          cardNo: this.person.certificate.certificateNo,
          deptId: this.dept.deptId,
          localDeptId: this.dept.localDeptId,
          regDeptId: this.doctor.regDeptId || this.dep.regDeptId,
          localRegDeptId: this.doctor.localRegDeptId || this.dep.localRegDeptId,
          regDeptName: this.doctor.deptName || this.dep.deptName,
          seqId: this.dep.seqId,
          localDoctorId: this.doctor.localDoctorId || this.dep.localDoctorId,
          doctorName: this.doctor.doctorName,
          workDate: this.dep.workDate,
          planTime: this.dep.planTime,
          timeId: this.time.timeId,
          startTime: this.time.startTime,
          endTime: this.time.endTime,
          register: '',
          doctorId: this.doctor.doctorId || '',
          source: SUBMIT_SOURCE
        }, localStorage.appointType],
        `${PLATFORM_PREFIX}.registrationService`,
        'doRegistrationSync'
      ).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200) {
          localStorage.order = JSON.stringify(res.data.body)
          let d = res.data.body
          if (localStorage.appointType === '3') {
            this.dialogTitle = CONFIRM_PAY_TIPS[6].title
            this.dialogContent = CONFIRM_PAY_TIPS[6].content
            this.dialog = true
            return
          }
          if (d.daylight === '1') {
            // 夏令时
            this.dialogTitle = CONFIRM_PAY_TIPS[4].title
            this.dialogContent = CONFIRM_PAY_TIPS[4].content
          } else if (d.daylight === '2') {
            // 冬令时
            this.dialogTitle = CONFIRM_PAY_TIPS[5].title
            this.dialogContent = CONFIRM_PAY_TIPS[5].content
          } else {
            if (d.firstDiagnosis === '1') {
            // 初诊
              this.dialogTitle = CONFIRM_PAY_TIPS[0].title
              this.dialogContent = CONFIRM_PAY_TIPS[0].content
            } else {
              this.dialogTitle = CONFIRM_PAY_TIPS[d.nature].title
              this.dialogContent = CONFIRM_PAY_TIPS[d.nature].content
            }
          }
          this.dialog = true
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      }).catch(res => {
        this.$store.commit('UPDATE_LOADING')
        console.warn(res)
      })
    },
    confirmSubmit () {
      this.$router.replace('/yygh/pay')
    },
    selectFamilyHandle (f) {
      this.person = f
    }
  },
  components: {Steps, Position, SearchBar, SelectRole}
};
</script>

<style lang="less">
.Confirm {
  .content {
    width: 1080px;
    margin: 0 auto;
    background-color: #ffffff;
    overflow: hidden;
  }
  .content .position_now img {
    margin-left: 20px;
    vertical-align: middle;
  }
  .content .position_now {
    margin-top: 22px;
  }
  .content .position_now span {
    font-family: SimSun;
    font-size: 12px;
    color: #666666;
  }
  .border_content .sure_message {
    color: #EE7202;
    font-size: 24px;
    padding: 20px;
  }
  .border_content .sure_message_content {
    width: 1040px;
    background-color: rgb(254, 251, 248);
    margin-left: 20px;
    border: 1px solid rgb(245, 230, 221);
  }
  .sure_message_content .name span {
    display: inline-block;
  }
  .sure_message_content .name span:nth-of-type(1) {
    margin-left: 24px;
  }
  .sure_message_content .name span:nth-of-type(2) {
    margin-left: 16px;
    color: #993333;
  }
  .sure_message_content .name {
    height: 46px;
    width: 1010px;
    margin: 0 auto;
    border-bottom: 1px solid rgb(245, 230, 221);
    line-height: 46px;
  }
  .sure_message_content .jiu_card_num {
    margin-top: 30px;
    margin-left: 38px;
  }
  .sure_message_content .jiu_card_num span:nth-of-type(1) {
    color: #666666;
  }
  .sure_message_content .jiu_card_num span:nth-of-type(2) {
    color: #333333;
    display: inline-block;
    margin-left: 28px;
  }
  .sure_message_content .yi_card_number {
    margin-top: 18px;
    margin-left: 38px;
  }
  .sure_message_content .yi_card_number span:nth-of-type(1) {
    color: #666666;
  }
  .sure_message_content .yi_card_number span:nth-of-type(2) {
    color: #333333;
    display: inline-block;
    margin-left: 28px;
  }
  .sure_message_content .id_card_num {
    margin-top: 18px;
    margin-left: 38px;
  }
  .sure_message_content .id_card_num span:nth-of-type(1) {
    color: #666666;
  }
  .sure_message_content .id_card_num span:nth-of-type(2) {
    color: #333333;
    display: inline-block;
    margin-left: 28px;
  }
  .sure_message_content .department_time {
    width: 1000px;
    padding: 20px;
    background-color: rgb(253, 244, 236);
    margin: 0 auto;
    margin-top: 20px;
    overflow: hidden;
  }
  .department_time .department_title {
    color: #999;
  }
  .department_time .doctor_name {
    margin-top: 12px;
  }
  .department_time .doctor_name span:nth-of-type(1) {
    color: #333333;
  }
  .department_time .doctor_name span:nth-of-type(2) {
    display: inline-block;
    color: #993333;
    margin-left: 20px;
  }
  .department_time .onduty_time_title {
    margin-top: 20px;
    color: #999;
  }
  .department_time .onduty_time {
    padding-top: 10px;
  }

  .sure_message_content .money_button {
    margin-left: 40px;
    margin-top: 26px;
    padding-bottom: 30px;
  }

  .sure_message_content .price {
    margin-top: 30px;
    width: 1010px;
    border-bottom: 1px solid rgb(245, 230, 221);
    height: 80px;
    margin: 0 auto;
    line-height: 80px;
    padding-left: 30px;
  }
  .sure_message_content .price span {
    display: inline-block;
  }
  .sure_message_content .price span:nth-of-type(1) {
    font-size: 14px;
    color: #333333;
  }
  .sure_message_content .price span:nth-of-type(2) {
    font-size: 20px;
    color: #993333;
  }
  .border_content .warn {
    margin: 40px;
    padding-bottom: 100px;
  }
  .border_content .warn li {
    font-size: 14px;
    color: #666666;
    margin-top: 10px;
    font-family: 'Microsoft YaHei';
  }
  .alert_confirm .border {
    width: 100%;
    height: 1px;
    background-color: rgb(229, 229, 229);
  }
  .confirm_content {
    height: 300px;
    overflow: auto;
  }
  .select_famlity {
    margin-left: 80%;
    margin-top: 20px;
  }
  .select_famlity img {
    vertical-align: middle;
  }
  .select_famlity span {
    vertical-align: middle;
    font-size: 14px;
  }
  .famlity_person {}
  .famlity_person li {
    float: left;
    margin-left: 10%;
    margin-top: 5%;
  }
  .famlity_person .message {
    width: 216px;
    height: 42px;
  }



}
</style>
